<?php 

/**
 * @author toannv
 * @copyright 2013
 */
 
    define('INCLUDE_CHECK',true);
    require 'connect.php';
    require 'function.php';
    
    $error = NULL;    
    if(!empty ($_POST ['email'])){
        $email = $_POST['email'];
        $userName = $_POST['user'];
        $password = $_POST['password'];        
        $result = register($userName, $password, $email);
        if($result!=1){
            $error = "Tài khoản đã tồn tại. Bạn không thể đăng ký tài khoản này.";
        }else{
            header("Location: index.html");
            die();
        }
    }
    
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title id='Description'>Đăng ký tài khoản</title>
    <link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.base.css" type="text/css"/>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="scripts/jqxcore.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/main.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "summer";
            $("#register").jqxExpander({ toggleMode: 'none', width: '400px', showArrow: false, theme: theme });
            $('#sendButton').jqxButton({ width: 60, height: 25, theme: theme });
            $('#acceptInput').jqxCheckBox({ width: 130, theme: theme });

            $('#sendButton').on('click', function () {
                $('#testForm').jqxValidator('validate');
                $('#testForm').jqxValidator({ onError: function () {
                    alert('You havent filled the form correctly!');
                } });
                $('#testForm').jqxValidator({ onSuccess: function () {
                    var regEmail = $("#emailInput").val();
                    var username = $("#userInput").val();
                    var password = $("#passwordInput").val();
                    var passwordConfirm = $("#passwordConfirmInput").val();

                    var form = document.createElement('FORM');
                    form.method = 'post';
                    form.action = "register.php";

                    var email, user, pass;
                    email = document.createElement('INPUT');
                    email.type = "hidden";
                    email.name = "email";
                    email.value = regEmail;

                    user = document.createElement('INPUT');
                    user.type = "hidden";
                    user.name = "user";
                    user.value = username;

                    pass = document.createElement('INPUT');
                    pass.type = "hidden";
                    pass.name = "password";
                    pass.value = password;

                    form.appendChild(email);
                    form.appendChild(user);
                    form.appendChild(pass);

                    document.body.appendChild(form);
                    form.submit();
                } });
            });
            $('.text-input').jqxInput({ theme: theme });

            var date = new Date();
            date.setFullYear(1995, 0, 1);
            $('#birthInput').jqxDateTimeInput({ theme: theme, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) });

            // initialize validator.
            $('#testForm').jqxValidator({
                rules: [
                    { input: '#userInput', message: 'Bạn cần nhập tên tài khoản không có dấu', action: 'keyup, blur', rule: 'required' },
                    { input: '#userInput', message: 'Tên tài khoản phải lớn hơn 5 ký tự', action: 'keyup, blur', rule: 'length=5,32' },
                    { input: '#birthInput', message: 'Ngày sinh của bạn không phù hợp', action: 'valuechanged', rule: function (input, commit) {
                        var date = $('#birthInput').jqxDateTimeInput('value');
                        var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2000;
                        // call commit with false, when you are doing server validation and you want to display a validation error on this field.
                        return result;
                    }
                    },
                    { input: '#passwordInput', message: 'Bạn cần nhập mật khẩu (không phân biệt chữ hoa, thường)', action: 'keyup, blur', rule: 'required' },
                    { input: '#passwordInput', message: 'Mật khẩu của bạn phải lớn hơn 4 ký tự', action: 'keyup, blur', rule: 'length=4,32' },
                    { input: '#passwordConfirmInput', message: 'Bạn cần nhập lại mật khẩu', action: 'keyup, blur', rule: 'required' },
                    { input: '#passwordConfirmInput', message: 'Mật khẩu không chính xác', action: 'keyup, focus', rule: function (input, commit) {
                        // call commit with false, when you are doing server validation and you want to display a validation error on this field.
                        if (input.val() === $('#passwordInput').val()) {
                            return true;
                        }
                        return false;
                    }
                    },
                    { input: '#emailInput', message: 'Bạn cần nhập địa chỉ email', action: 'keyup, blur', rule: 'required' },
                    { input: '#emailInput', message: 'Địa chỉ email không hợp lệ', action: 'keyup', rule: 'email' },
//                    { input: '#ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
//                    { input: '#phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
//                    { input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' },
                    { input: '#acceptInput', message: 'Xác nhận thông tin đăng ký!', action: 'change', rule: 'required', position: 'right:0,0'}
                ], theme: theme
            });
        });
    </script>
    <style type="text/css">
        .text-input {
            height: 21px;
            width: 220px;
        }

        .register-table {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .register-table td,
        .register-table tr {
            margin: 0px;
            padding: 2px;
            border-spacing: 0px;
            border-collapse: collapse;
            font-family: Verdana;
            font-size: 12px;
        }

        h3
                {
                    color: #000000;
                    display: inline-block;
                    margin: 0px;
                }
    </style>
</head>
<body class='default'>
<div id="register" style="padding-left: 30%; padding-top: 100px">
    <div><h3><center>Đăng ký tài khoản</center></h3></div>
    <div>
        <form id="testForm" action="register.php" method="POST">
            <table class="register-table">
                <tr>
                    <td>E-mail:</td>
                    <td><input type="text" id="emailInput" placeholder="someone@mail.com" class="text-input"/></td>
                </tr>
                <tr>
                    <td>Tài khoản:</td>
                    <td><input type="text" id="userInput" class="text-input"/></td>
                </tr>
                <tr>
                    <td>Mật khẩu:</td>
                    <td><input type="password" id="passwordInput" class="text-input"/></td>
                </tr>
                <tr>
                    <td>Nhập lại mật khẩu:</td>
                    <td><input type="password" id="passwordConfirmInput" class="text-input"/></td>
                </tr>
                <tr>
                    <td>Ngày sinh:</td>
                    <td>
                        <div id="birthInput"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="padding: 5px;">
                        <div id="acceptInput" style="margin-left: 5px;">Xác nhận thông tin đăng ký!</div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;"><input type="button" value="Send" id="sendButton"/></td>
                </tr>
                <?php
                    if($error!=NULL){
                        echo '<tr><td colspan="2" style="text-align: center; color: red;">'.$error.'</td></tr>';
                    }
                ?>
            </table>
        </form>
    </div>
</div>
</body>
</html>